@import "../common/css/variables.scss";
@import "../../common/css/size.scss";
$charbg:#EBEBEB;
.m-chat{
  background: $charbg;

  .chatHead{
    background: #fff;
    width: 100%;
    height: $_40;
  }
  .c-container{
    height: calc(100% - #{$_40});
    overflow-y: auto;
  }
  .c-content{
    //position: absolute;
    height: calc(100% - #{$_45});
    width: 100%;
    overflow-y: auto;
  }

  .c-bottom{
    position: relative;
    //bottom: 0;
    height: $_45;
    background: #F5F5F6;
    .c-input{
      width: 58%;
      background: #FCFCFC;
      border: 0 solid #DDDDDD;
      border-radius: $_4;
      height: $_22;
      //line-height: $_32;
      padding: $_5 $_10;
      overflow-y: auto;
    }

    .c-photo{
      width: $_23;
      height: $_20;
      background: url('../img/product/photo.png') no-repeat;
      background-size: cover;

    }
    .c-btn{
      height: $_30;
      line-height: $_30;
      width: $_70;
      color: #fff;
      background: $cMain;
      text-align: center;
      border-radius: $_4;
    }
    /*隐藏选择文件按钮*/
    input::-webkit-file-upload-button{
      display: none;
    }
    .c-photo input{}
  }
  .c-face{
    width: $_20;
    height: $_20;
    background: url('../img/product/face.png') no-repeat;
    background-size: cover;
  }
  /*下拉获取更多*/
  .reload-tips{
    margin-top:-$_20;
  }
  /*客服聊天页面*/

  .c-content{
    /*共通样式*/
    .arrow{
      width: 0;
      height: 0;
      /*border:solid 8px;*/
      position: absolute;
      top: $_10;
    }
    .chat-text {
      padding: $_5 $_8;
      max-width: $_240;
      border-radius: $_2;
      font-size: $_14;
      margin-top: $_4;
      word-wrap: break-word;
    }
    .chatItem{
      position: relative;
      margin-top: $_10;
      //display: flex;
      //flex-direction: row;
    }
    .chat-text-wrap{
      position: relative;
    }
    .headpicture-chat{
      width: $_36;
      height: $_36;
      border-radius: 50%;
      margin: auto $_10;
    }
    .getMore{
      height: 1rem;
      line-height: 1rem;
      color: #7f7f7f;

    }
    /*我的样式*/
    .me {
      float: right;
      .arrow2 {
        border-width:$_5;
        border-style:solid;
        border-color:$charbg $charbg $charbg #fff;
        right: $_52;
        background: #fff;
      }
      .text{
        background: #fff;
        //color: #fff;
        float: left;
        margin-right: $_5;

      }
    }

    /*对方的样式*/
    .you{
      float: left;
      .arrow2 {
        border-width:$_5;
        border-style:solid;
        border-color:$charbg #fff $charbg $charbg;
        left: $_52;
        background: #fff;
      }
      .text{
        background: #fff;
        float: right;
        margin-left: $_5;
      }
      .textZhu{
        margin-top: 0.2rem;
      }
    }

  }
.imgLarge{
  max-width: 100% !important;
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 8;
  background: rgba(0, 0, 0, 0.95) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  margin: 0 !important;
}
}

#facebox5{
  left:0;
  top: $_45;
  background: #fff;
  width: calc(100% - #{$_20});
  padding: $_10;
}
.qqfaceImg{
  width: $_24;
}
.facePad{
  padding: $_2 $_2;
}

